export default class SliderBase {
    constructor(container, options = {}) {
        this.container = container;
        this.min = options.min || 0;
        this.max = options.max || 100;
        this.value = options.value || 50;
        this.orientation = options.orientation || 'horizontal';
        this.color = options.color || '#6c63ff';
        this.thumbColor = options.thumbColor || '#ffffff';
        this.options = options;

        this.init();
    }

    // 初始化滑块
    init() {
        const sliderContainer = document.createElement('div');
        sliderContainer.id = 'slider-container';
        sliderContainer.style.position = 'relative';
        sliderContainer.style.padding = '0px';
        sliderContainer.style.margin = '0px';

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = this.min;
        slider.max = this.max;
        slider.value = this.value;
        slider.className = `slider ${this.orientation}-slider`;

        // 根据方向设置样式
        if (this.orientation === 'vertical') {
            slider.style.writingMode = 'bt-lr'; // 使 input[type=range] 垂直
            slider.style.transform = 'rotate(270deg)';
            slider.style.height = this.options.height || '150px';
            slider.style.width = this.options.width || '20px';
        } else {
            slider.style.height = this.options.height || '20px';
            slider.style.width = this.options.width || '150px';
        }

        // 不直接通过 JavaScript 设置内联样式，而是设置 CSS 变量
        slider.style.setProperty('--thumb-color', this.thumbColor);
        slider.style.setProperty('--track-color', this.color);
        slider.style.setProperty('--thumb-size', this.orientation === 'vertical' ? this.options.width || '20px' : '15px');
        slider.style.setProperty('--track-size', this.orientation === 'vertical' ? this.options.height || '200px' : '8px');

        sliderContainer.appendChild(slider);
        this.container.appendChild(sliderContainer);

        // 绑定事件
        slider.addEventListener('input', (event) => {
            this.onValueChange(event.target.value);
        });

        this.sliderElement = slider;
    }

    // 值变化时触发
    onValueChange(value) {
        console.log(`Slider Value: ${value}`);
    }

    // 设置新值
    setValue(value) {
        this.sliderElement.value = value;
    }

    // 获取当前值
    getValue() {
        return this.sliderElement.value;
    }
}
